<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>bootstrp</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css"/>
    <!--    <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css"  media="all">-->
    <!--    <link rel="stylesheet" href="./../css/bootstrap.min.css">-->
    <!--    <link rel="stylesheet" href="./../css/bootstrap-table.min.css">-->
    <!--    <script src="./../js/jquery-1.9.1.js"></script>-->
    <!--    <script src="./../js/bootstrap.min.js"></script>-->
    <!--    <script src="./../js/bootstrap-table.min.js"></script>-->


    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/locale/bootstrap-table-zh-CN.min.js"></script>
</head>

</head>
<body>

<table class="table table-bordered" id="goodsTable">
    <thead>
    <tr>
        <th><input type='checkbox' id="allCheck" class='input-mini'/>全选</th>
        <th>序号</th>
        <th data-sortable="true">ID</th>
        <th>修理厂</th>
        <th>报案号</th>
        <th>定损ID</th>
        <th>计算书号</th>
        <th>案件状态</th>
        <th>收单归属</th>
        <th>定损员姓名</th>
        <th>车牌号</th>
        <th>领款人姓名</th>
        <th  data-sortable="true">领款金额</th>
        <!-- 										<th>行政归属</th> -->
        <th>定损完成日期</th>
        <th data-sortable="true">核赔日期</th>

        <th>
            <button id="dupdevice" type="button" class="btn btn-primary">编辑</button>
            <button id="dupdevice111" type="button" class="btn btn-primary">编辑</button>
        </th>
    </tr>
    </thead>
    <tbody id="userBody" class="">

    </tbody>
</table>


<a href="javascript:;" id="remove"><span class="hidden-480">删除</span></a>
<table id="mytab" class="table table-hover"></table>
<script>
    // 192.168.0.103  company    192.168.1.3 home
    $('#mytab').bootstrapTable({
        classes: "table table-bordered table-hover table-striped",//加载的样式
        method: 'get',
        // url: "http://192.168.1.3:8005/test/data", // 请求路径
        url: "http://192.168.0.103:8005/test/get/data", // 请求路径
        striped: true, // 是否显示行间隔色
        pageNumber: 1, // 初始化加载第一页
        pagination: true, // 是否分页
        sidePagination: 'client', // server:服务器端分页|client：前端分页
        pageSize: 10, // 单页记录数
        pageList: [5, 20, 30],
        showRefresh: true,   // 刷新按钮
        responseHandler: function (res) {
            console.log('==========' + JSON.stringify(res))
            return {
                "total": res.data.total,
                "rows": res.data.list
            };
        },
        queryParams: function (params) { // 上传服务器的参数
            console.log('=========queryParams======'  + JSON.stringify(params))
            var temp = {
                // limit : params.limit, // 每页显示数量
                // offset : params.offset, // SQL语句起始索引
                pageSize : params.limit, // 每页显示数量
                pageNum : params.offset, // SQL语句起始索引
                // name: $("#sname").val(),
                // viewReason: $("#viewReason").val(),
                name: '哈哈',
                viewReason:'1212121',
            };
            return temp;
        },
        columns: [{
            checkbox: true
        }, {
            title: 'id',
            field: 'id',
            visible: true
        }, {
            title: '网点名称',
            field: 'networkName',

        }, {
            title: '银行名称',
            sortable: true,
            field: 'bankName',

        }, {
            title: '人员数',
            field: 'personCount',
            sortable: true,
            // formatter: formatSex
        }, {
            title: '资产',
            // cellStyle: formatTableUnit,
            // formatter: paramsMatter,
            field: 'asset'
        },
            {
            title: '联系电话',
            field: 'phone'
        },
            {
            title: '被访姓名',
            field: 'viewPeople'
        },
            {
            title: '来访事由',
            field: 'viewReason',
            formatter: formatReason
        },
            {
            title: '来访时间',
            field: 'visitTime',
            sortable: true,
            formatter: formatTime
        }, {
            title: '是否离开',
            field: 'isLeave',
            formatter: formatIsLeave
        },
            {
                title: '操作',
                field: 'id',
                formatter: option
            }
        ]
    })

    // 定义删除、更新按钮
    function option(value, row, index) {
        var htm = "";
        htm += '<button id="dupdevice" deviceId="' + value + '" onclick="updDevice(' + value + ')" type="button" class="btn btn-primary">编辑</button>'
         + '<button id="dupdevice" deviceId="' + value + '" onclick="updDevice(' + value + ')" type="button" class="btn btn-primary">编辑</button>'
        return htm;
    }

    //表格超出宽度鼠标悬停显示td内容
    function paramsMatter(value, row, index) {
        var span = document.createElement("span");
        span.setAttribute("title", value);
        span.innerHTML = value;
        return span.outerHTML;
    }

    //td宽度以及内容超过宽度隐藏
    function formatTableUnit(value, row, index) {
        return {
            css: {
                "white-space": "nowrap",
                "text-overflow": "ellipsis",
                "overflow": "hidden",
                "max-width": "60px"
            }
        }
    }

    // 格式化性别"sex": 0,是女  "sex": 1,是男
    function formatSex(value, row, index) {
        return value == 1 ? "男" : "女";
    }

    // 格式化在离厂//"isLeave": 0,是离场，"isLeave": 1,是在场
    function formatIsLeave(value, row, index) {
        return value == 1 ? "离厂" : "在厂";
    }

    // 格式化时间
    function formatTime(value, row, index) {
        var date = new Date();
        date.setTime(value);
        var month = date.getMonth() + 1;
        var hours = date.getHours();
        if (hours < 10)
            hours = "0" + hours;
        var minutes = date.getMinutes();
        if (minutes < 10)
            minutes = "0" + minutes;
        var time = date.getFullYear() + "-" + month + "-" + date.getDate() +
            " " + hours + ":" + minutes;
        return time;
    }

    // 格式化访问理由 "viewReason": 1是面试,2是开会，3是拜访客户，4是项目实施
    function formatReason(value, row, index) {
        var str;
        switch (value) {
            case 1:
                str = "面试";
                break;
            case 2:
                str = "开会";
                break;
            case 3:
                str = "拜访客户";
                break;
            case 4:
                str = "项目实施";
                break;
            default:
                str = "其他";
        }
        return str;
    }

    // 删除按钮事件
    $("#remove").on("click", function () {
        if (!confirm("是否确认删除？"))
            return;
        var rows = $("#mytab").bootstrapTable('getSelections'); // 获得要删除的数据
        if (rows.length == 0) { // rows 主要是为了判断是否选中，下面的else内容才是主要
            alert("请先选择要删除的记录!");
            return;
        } else {
            var ids = new Array(); // 声明一个数组
            $(rows).each(function () { // 通过获得别选中的来进行遍历
                ids.push(this.id); // cid为获得到的整条数据中的一列
            });

            //后端删除的方法
            deleteMs(ids)
        }

    })

    // 删除访客,删除数据库内容，刷新表格即可删除
    function deleteMs(ids) {
        $.ajax({
            url: basePath + "/caller/dels?ids=" + ids,
            dataType: "json",
            type: "get",
            success: function (data) {
                if (data > 0) {
                    msg(6, "操作成功")
                    $('#mytab').bootstrapTable('refresh', {
                        url: basePath + '/caller/list'
                    });
                }
            }
        });
    }

    // 编辑访客
    function updDevice(id) {
        alert("编辑")
    }
</script>


<!--
<script>
    // 192.168.0.103  company    192.168.1.3 home
    $('#mytab').bootstrapTable({
        classes: "table table-bordered table-hover table-striped",//加载的样式
        // method: 'get',
        // url: "http://192.168.1.3:8005/test/data", // 请求路径
        // url: "http://192.168.0.103:8005/test/data", // 请求路径
        striped: true, // 是否显示行间隔色
        pageNumber: 1, // 初始化加载第一页
        pagination: true, // 是否分页
        sidePagination: 'client', // server:服务器端分页|client：前端分页
        pageSize: 10, // 单页记录数
        pageList: [5, 20, 30],
        showRefresh: true,// 刷新按钮
        ajax:function(request) {
            $.ajax({
                url:"http://192.168.0.103:8005/test/data",
                type:"GET",
                dataType:"json",
                data:{
                    // date:dateFormat($("#calendar").val()),  //dateFormat($("#calendar").val())
                    // type:type,
                    value:"hot",
                    order:"asc",
                    name:"徐"
                },
                success:function(res){
                    request.success({
                        // row : data
                        "total": res.data.total,
                        "rows": res.data.list
                    });
                    // $('#mytab table').bootstrapTable('load', res.data.list);
                },
                error:function(error){
                    console.log(error);
                }
            })
        },
        columns: [{
            checkbox: true
        }, {
            title: 'id',
            field: 'id',
            visible: true
        }, {
            title: '网点名称',
            field: 'networkName',

        }, {
            title: '银行名称',
            sortable: true,
            field: 'bankName',

        }, {
            title: '人员数',
            field: 'personCount',
            // formatter: formatSex
        }, {
            title: '资产',
            // cellStyle: formatTableUnit,
            // formatter: paramsMatter,
            field: 'asset'
        }
        ]
    })

    // 定义删除、更新按钮
    function option(value, row, index) {
        var htm = "";
        htm += '<button id="dupdevice" deviceId="' + value +
            '" onclick="updDevice(' + value + ')">编辑</button>'
        return htm;
    }

    //表格超出宽度鼠标悬停显示td内容
    function paramsMatter(value, row, index) {
        var span = document.createElement("span");
        span.setAttribute("title", value);
        span.innerHTML = value;
        return span.outerHTML;
    }

    //td宽度以及内容超过宽度隐藏
    function formatTableUnit(value, row, index) {
        return {
            css: {
                "white-space": "nowrap",
                "text-overflow": "ellipsis",
                "overflow": "hidden",
                "max-width": "60px"
            }
        }
    }

    // 格式化性别"sex": 0,是女  "sex": 1,是男
    function formatSex(value, row, index) {
        return value == 1 ? "男" : "女";
    }

    // 格式化在离厂//"isLeave": 0,是离场，"isLeave": 1,是在场
    function formatIsLeave(value, row, index) {
        return value == 1 ? "离厂" : "在厂";
    }

    // 格式化时间
    function formatTime(value, row, index) {
        var date = new Date();
        date.setTime(value);
        var month = date.getMonth() + 1;
        var hours = date.getHours();
        if (hours < 10)
            hours = "0" + hours;
        var minutes = date.getMinutes();
        if (minutes < 10)
            minutes = "0" + minutes;
        var time = date.getFullYear() + "-" + month + "-" + date.getDate() +
            " " + hours + ":" + minutes;
        return time;
    }

    // 格式化访问理由 "viewReason": 1是面试,2是开会，3是拜访客户，4是项目实施
    function formatReason(value, row, index) {
        var str;
        switch (value) {
            case 1:
                str = "面试";
                break;
            case 2:
                str = "开会";
                break;
            case 3:
                str = "拜访客户";
                break;
            case 4:
                str = "项目实施";
                break;
            default:
                str = "其他";
        }
        return str;
    }

    // 删除按钮事件
    $("#remove").on("click", function () {

        if (!confirm("是否确认删除？"))
            return;
        var rows = $("#mytab").bootstrapTable('getSelections'); // 获得要删除的数据
        if (rows.length == 0) { // rows 主要是为了判断是否选中，下面的else内容才是主要
            alert("请先选择要删除的记录!");
            return;
        } else {
            var ids = new Array(); // 声明一个数组
            $(rows).each(function () { // 通过获得别选中的来进行遍历
                ids.push(this.id); // cid为获得到的整条数据中的一列
            });

            //后端删除的方法
            deleteMs(ids)
        }

    })

    // 删除访客,删除数据库内容，刷新表格即可删除
    function deleteMs(ids) {
        $.ajax({
            url: basePath + "/caller/dels?ids=" + ids,
            dataType: "json",
            type: "get",
            success: function (data) {
                if (data > 0) {
                    msg(6, "操作成功")
                    $('#mytab').bootstrapTable('refresh', {
                        url: basePath + '/caller/list'
                    });
                }
            }
        });
    }

    // 编辑访客
    function updDevice(id) {
        alert("编辑")
    }
</script>-->

</body>
</html>
